import Son from '@/components/son'
// 1. 普通导入方式
// import './index.scss'
// 2. css module 方式
import style from './index.module.scss'
console.log('是一个对象自定义的样式名', style)
/**
 * 组件化 样式同名演示冲突问题
 *  1. 同类名演示 之间会覆盖
 *  2. 导入子组件和父组件样式的相应顺序 =》 后面的覆盖的前面的
 *  如何解决：=》 使用css modules（样式模块化）
 *  背景：实际上多人协作
 *   **步骤**：
 *    1. 创建样式文件，名称格式为：`index.module.scss`
 *    2. 在 `index.module.scss` 文件中，按照原来的方式写 CSS 即可
 *    3. **在 JS 中通过 `import styles from './index.module.scss'` 来导入样式文件**
 *    4. 在 JSX 结构中，通过 `className={styles.类名}` 形式来使用样式（此处的 类名 就是 CSS 中写的类名）
 *
 *
 *
 * ===css module 定义全局样式
 *  语法：
 *    1.定义一个全局类名  :global(类名) {样式}
 *    2.定义多个全局类名  :global {类名() ... }  推荐写法
 *    3. 组件内 按照原始方法使用  className="orange bd"
 */

function Task() {
  // js 逻辑
  return (
    <div className={style.box}>
      <Son />
      <h1 className={[style.pd, style.h1].join(' ')}>task</h1>
      <h1 className={`${style.pd} ${style.h1}`}>多个类名共同作用 task</h1>
      <p className="orange bd">全局样式</p>
    </div>
  )
}

export default Task
